<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户管理 - 仓库管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        body {
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            margin: 0;
            font-size: 24px;
            font-weight: 300;
        }
        
        .main-container {
            display: flex;
            height: calc(100vh - 70px);
        }
        
        .sidebar {
            width: 250px;
            background-color: #fff;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            overflow-y: auto;
        }
        
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .nav-item {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .nav-item:hover {
            background-color: #f8f9fa;
            color: #667eea;
        }
        
        .nav-item.active {
            background-color: #667eea;
            color: white;
        }
        
        .nav-item i {
            margin-right: 10px;
            font-size: 16px;
        }
        
        .nav-item span {
            font-size: 14px;
        }
        
        .dashboard {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .dashboard h2 {
            color: #333;
            margin-bottom: 30px;
            font-weight: 300;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .search-box {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .search-input {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: #667eea;
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #5a6fd8;
        }
        
        .btn-success {
            background-color: #52c41a;
            color: white;
        }
        
        .btn-success:hover {
            background-color: #49aa15;
        }
        
        .btn-warning {
            background-color: #faad14;
            color: white;
        }
        
        .btn-warning:hover {
            background-color: #d48806;
        }
        
        .btn-danger {
            background-color: #ff4d4f;
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #cf1322;
        }
        
        .customer-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .customer-table th,
        .customer-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .customer-table th {
            background-color: #fafafa;
            font-weight: 500;
            color: #333;
        }
        
        .customer-table tr:hover {
            background-color: #f8f9fa;
        }
        
        .status-active {
            color: #52c41a;
            font-weight: 500;
        }
        
        .status-inactive {
            color: #ff4d4f;
            font-weight: 500;
        }
        
        .action-buttons {
            display: flex;
            gap: 5px;
        }
        
        .btn-sm {
            padding: 4px 8px;
            font-size: 12px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 30px;
            border-radius: 8px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }
        
        .close {
            font-size: 24px;
            font-weight: bold;
            cursor: pointer;
            color: #999;
        }
        
        .close:hover {
            color: #333;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #333;
        }
        
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        
        .form-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        .form-textarea {
            resize: vertical;
            min-height: 80px;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 30px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 8px;
            align-items: center;
        }
        
        .pagination button {
            padding: 8px 12px;
            border: 1px solid #ddd;
            background: white;
            cursor: pointer;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
            min-width: 40px;
        }
        
        .pagination button:hover {
            background-color: #f8f9fa;
            border-color: #667eea;
        }
        
        .pagination button.active {
            background-color: #667eea;
            color: white;
            border-color: #667eea;
        }
        
        .pagination button:disabled {
            background-color: #f5f5f5;
            color: #ccc;
            cursor: not-allowed;
            border-color: #ddd;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
        
        .no-data {
            text-align: center;
            padding: 50px;
            color: #999;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .stat-card h3 {
            margin: 0 0 10px 0;
            font-size: 28px;
            font-weight: 300;
        }
        
        .stat-card p {
            margin: 0;
            font-size: 14px;
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <h1><i class="layui-icon layui-icon-user"></i> 客户管理</h1>
    </div>
    
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="nav-item" onclick="goToHome()">
                <i class="layui-icon layui-icon-home"></i>
                <span>系统首页</span>
            </div>
            <div class="nav-item active" onclick="showCustomers()">
                <i class="layui-icon layui-icon-user"></i>
                <span>客户管理</span>
            </div>
            <div class="nav-item" onclick="goToProducts()">
                <i class="layui-icon layui-icon-cart"></i>
                <span>商品管理</span>
            </div>
            <div class="nav-item" onclick="goToCategories()">
                <i class="layui-icon layui-icon-tabs"></i>
                <span>分类管理</span>
            </div>
            <div class="nav-item" onclick="goToOrders()">
                <i class="layui-icon layui-icon-form"></i>
                <span>订单管理</span>
            </div>
            <div class="nav-item" onclick="goToStockIn()">
                <i class="layui-icon layui-icon-add-1"></i>
                <span>入库管理</span>
            </div>
            <div class="nav-item" onclick="goToStockOut()">
                <i class="layui-icon layui-icon-delete"></i>
                <span>出库管理</span>
            </div>
            <div class="nav-item" onclick="goToReports()">
                <i class="layui-icon layui-icon-chart"></i>
                <span>统计报表</span>
            </div>
            <div class="nav-item" onclick="goToSettings()">
                <i class="layui-icon layui-icon-set"></i>
                <span>系统设置</span>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="content">
            <div class="dashboard">
                <h2><i class="layui-icon layui-icon-user"></i> 客户管理</h2>
                
                <!-- 统计卡片 -->
                <div class="stats-cards">
                    <div class="stat-card">
                        <h3 id="totalCustomers">0</h3>
                        <p>客户总数</p>
                    </div>
                    <div class="stat-card">
                        <h3 id="activeCustomers">0</h3>
                        <p>激活客户</p>
                    </div>
                </div>
                
                <!-- 工具栏 -->
                <div class="toolbar">
                    <div class="search-box">
                        <input type="text" id="searchName" class="search-input" placeholder="按客户名称搜索">
                        <input type="text" id="searchPhone" class="search-input" placeholder="按电话号码搜索">
                        <button class="btn btn-primary" onclick="searchCustomers()">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button class="btn btn-success" onclick="resetSearch()">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                        <button class="btn btn-warning" onclick="showActiveCustomers()">
                            <i class="layui-icon layui-icon-ok"></i> 只看激活
                        </button>
                        <select id="pageSizeSelect" class="search-input" style="width: auto;" onchange="changePageSize()">
                            <option value="10">每页10条</option>
                            <option value="20">每页20条</option>
                            <option value="50">每页50条</option>
                            <option value="100">每页100条</option>
                        </select>
                    </div>
                    <button class="btn btn-primary" onclick="showAddCustomerModal()">
                        <i class="layui-icon layui-icon-add-1"></i> 添加客户
                    </button>
                </div>
                
                <!-- 客户列表 -->
                <div id="customerList">
                    <div class="loading">
                        <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
                        <p>加载中...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加/编辑客户模态框 -->
    <div id="customerModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalTitle">添加客户</h3>
                <span class="close" onclick="closeCustomerModal()">&times;</span>
            </div>
            <form id="customerForm">
                <input type="hidden" id="customerId">
                <div class="form-group">
                    <label class="form-label">客户名称 *</label>
                    <input type="text" id="customerName" class="form-input" required>
                </div>
                <div class="form-group">
                    <label class="form-label">联系电话</label>
                    <input type="text" id="phone" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">邮箱地址</label>
                    <input type="email" id="email" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">联系地址</label>
                    <input type="text" id="address" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">联系人</label>
                    <input type="text" id="contactPerson" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">公司名称</label>
                    <input type="text" id="company" class="form-input">
                </div>
                <div class="form-group">
                    <label class="form-label">状态</label>
                    <select id="status" class="form-input">
                        <option value="ACTIVE">激活</option>
                        <option value="INACTIVE">停用</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">备注</label>
                    <textarea id="remark" class="form-input form-textarea"></textarea>
                </div>
                <div class="form-actions">
                    <button type="button" class="btn" onclick="closeCustomerModal()">取消</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        let customers = [];
        let currentPage = 1;
        let pageSize = 10;
        
        // 页面加载完成后执行
        layui.use(['layer'], function(){
            var layer = layui.layer;
            loadCustomers();
            loadCustomerStats();
        });
        
        // 加载客户统计数据
        function loadCustomerStats() {
            // 加载客户总数
            fetch('/api/customers/count')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        document.getElementById('totalCustomers').textContent = data.data;
                    }
                })
                .catch(error => console.error('加载客户总数失败:', error));
            
            // 加载激活客户数
            fetch('/api/customers/active')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        document.getElementById('activeCustomers').textContent = data.data.length;
                    }
                })
                .catch(error => console.error('加载激活客户数失败:', error));
        }
        
        // 加载客户列表
        function loadCustomers() {
            const customerList = document.getElementById('customerList');
            customerList.innerHTML = '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><p>加载中...</p></div>';
            
            fetch('/api/customers')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        customers = data.data;
                        renderCustomerTable();
                    } else {
                        customerList.innerHTML = '<div class="no-data">加载失败: ' + data.message + '</div>';
                    }
                })
                .catch(error => {
                    console.error('加载客户列表失败:', error);
                    customerList.innerHTML = '<div class="no-data">加载失败，请检查网络连接</div>';
                });
        }
        
        // 渲染客户表格
        function renderCustomerTable() {
            const customerList = document.getElementById('customerList');
            
            if (customers.length === 0) {
                customerList.innerHTML = '<div class="no-data">暂无客户数据</div>';
                return;
            }
            
            const startIndex = (currentPage - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            const pageCustomers = customers.slice(startIndex, endIndex);
            
            let tableHTML = `
                <table class="customer-table">
                    <thead>
                        <tr>
                            <th>客户名称</th>
                            <th>联系电话</th>
                            <th>邮箱地址</th>
                            <th>联系人</th>
                            <th>公司名称</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
            `;
            
            pageCustomers.forEach(customer => {
                const statusClass = customer.status === 'ACTIVE' ? 'status-active' : 'status-inactive';
                const statusText = customer.status === 'ACTIVE' ? '激活' : '停用';
                const createdTime = new Date(customer.createdTime).toLocaleString('zh-CN');
                
                tableHTML += `
                    <tr>
                        <td>${customer.customerName || '-'}</td>
                        <td>${customer.phone || '-'}</td>
                        <td>${customer.email || '-'}</td>
                        <td>${customer.contactPerson || '-'}</td>
                        <td>${customer.company || '-'}</td>
                        <td><span class="${statusClass}">${statusText}</span></td>
                        <td>${createdTime}</td>
                        <td>
                            <div class="action-buttons">
                                <button class="btn btn-warning btn-sm" onclick="editCustomer(${customer.id})">
                                    <i class="layui-icon layui-icon-edit"></i>
                                </button>
                                <button class="btn btn-success btn-sm" onclick="toggleCustomerStatus(${customer.id}, '${customer.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE'}')">
                                    <i class="layui-icon layui-icon-${customer.status === 'ACTIVE' ? 'close' : 'ok'}"></i>
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="deleteCustomer(${customer.id})">
                                    <i class="layui-icon layui-icon-delete"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            tableHTML += `
                    </tbody>
                </table>
            `;
            
            // 添加分页信息
            const totalPages = Math.ceil(customers.length / pageSize);
            const startRecord = startIndex + 1;
            const endRecord = Math.min(endIndex, customers.length);
            
            // 显示分页信息
            tableHTML += `
                <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center; color: #666; font-size: 14px;">
                    <div>显示第 ${startRecord} - ${endRecord} 条，共 ${customers.length} 条记录</div>
                    <div>每页 ${pageSize} 条</div>
                </div>
            `;
            
            // 添加分页控件
            if (totalPages > 1) {
                tableHTML += '<div class="pagination">';
                
                // 上一页按钮
                if (currentPage > 1) {
                    tableHTML += `<button onclick="goToPage(${currentPage - 1})">上一页</button>`;
                }
                
                // 页码按钮
                const startPage = Math.max(1, currentPage - 2);
                const endPage = Math.min(totalPages, currentPage + 2);
                
                for (let i = startPage; i <= endPage; i++) {
                    const activeClass = i === currentPage ? 'active' : '';
                    tableHTML += `<button class="${activeClass}" onclick="goToPage(${i})">${i}</button>`;
                }
                
                // 下一页按钮
                if (currentPage < totalPages) {
                    tableHTML += `<button onclick="goToPage(${currentPage + 1})">下一页</button>`;
                }
                
                tableHTML += '</div>';
            } else {
                // 即使只有一页也显示分页信息
                tableHTML += '<div class="pagination">';
                tableHTML += '<button class="active" disabled>1</button>';
                tableHTML += '</div>';
            }
            
            customerList.innerHTML = tableHTML;
        }
        
        // 搜索客户
        function searchCustomers() {
            const name = document.getElementById('searchName').value.trim();
            const phone = document.getElementById('searchPhone').value.trim();
            
            if (!name && !phone) {
                loadCustomers();
                return;
            }
            
            const customerList = document.getElementById('customerList');
            customerList.innerHTML = '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><p>搜索中...</p></div>';
            
            let searchUrl = '';
            if (name) {
                searchUrl = `/api/customers/search/name?customerName=${encodeURIComponent(name)}`;
            } else if (phone) {
                searchUrl = `/api/customers/search/phone?phone=${encodeURIComponent(phone)}`;
            }
            
            fetch(searchUrl)
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        customers = data.data;
                        currentPage = 1;
                        renderCustomerTable();
                    } else {
                        customerList.innerHTML = '<div class="no-data">搜索失败: ' + data.message + '</div>';
                    }
                })
                .catch(error => {
                    console.error('搜索客户失败:', error);
                    customerList.innerHTML = '<div class="no-data">搜索失败，请检查网络连接</div>';
                });
        }
        
        // 重置搜索
        function resetSearch() {
            document.getElementById('searchName').value = '';
            document.getElementById('searchPhone').value = '';
            loadCustomers();
        }
        
        // 显示激活客户
        function showActiveCustomers() {
            const customerList = document.getElementById('customerList');
            customerList.innerHTML = '<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i><p>加载中...</p></div>';
            
            fetch('/api/customers/active')
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        customers = data.data;
                        currentPage = 1;
                        renderCustomerTable();
                    } else {
                        customerList.innerHTML = '<div class="no-data">加载失败: ' + data.message + '</div>';
                    }
                })
                .catch(error => {
                    console.error('加载激活客户失败:', error);
                    customerList.innerHTML = '<div class="no-data">加载失败，请检查网络连接</div>';
                });
        }
        
        // 显示添加客户模态框
        function showAddCustomerModal() {
            document.getElementById('modalTitle').textContent = '添加客户';
            document.getElementById('customerForm').reset();
            document.getElementById('customerId').value = '';
            document.getElementById('customerModal').style.display = 'block';
        }
        
        // 编辑客户
        function editCustomer(id) {
            const customer = customers.find(c => c.id === id);
            if (!customer) return;
            
            document.getElementById('modalTitle').textContent = '编辑客户';
            document.getElementById('customerId').value = customer.id;
            document.getElementById('customerName').value = customer.customerName || '';
            document.getElementById('phone').value = customer.phone || '';
            document.getElementById('email').value = customer.email || '';
            document.getElementById('address').value = customer.address || '';
            document.getElementById('contactPerson').value = customer.contactPerson || '';
            document.getElementById('company').value = customer.company || '';
            document.getElementById('status').value = customer.status || 'ACTIVE';
            document.getElementById('remark').value = customer.remark || '';
            
            document.getElementById('customerModal').style.display = 'block';
        }
        
        // 切换客户状态
        function toggleCustomerStatus(id, newStatus) {
            const statusText = newStatus === 'ACTIVE' ? '激活' : '停用';
            
            layui.use(['layer'], function(){
                var layer = layui.layer;
                layer.confirm(`确定要${statusText}这个客户吗？`, {
                    title: '确认操作',
                    btn: ['确定', '取消']
                }, function(index) {
                    fetch(`/api/customers/${id}/status?status=${newStatus}`, {
                        method: 'PUT'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            layer.msg(`${statusText}成功`, {icon: 1});
                            loadCustomers();
                            loadCustomerStats();
                        } else {
                            layer.msg(`${statusText}失败: ` + data.message, {icon: 2});
                        }
                    })
                    .catch(error => {
                        console.error('更新客户状态失败:', error);
                        layer.msg(`${statusText}失败，请检查网络连接`, {icon: 2});
                    });
                    layer.close(index);
                });
            });
        }
        
        // 关闭模态框
        function closeCustomerModal() {
            document.getElementById('customerModal').style.display = 'none';
        }
        
        // 删除客户
        function deleteCustomer(id) {
            layui.use(['layer'], function(){
                var layer = layui.layer;
                layer.confirm('确定要删除这个客户吗？', {
                    title: '确认删除',
                    btn: ['确定', '取消']
                }, function(index) {
                    fetch(`/api/customers/${id}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.code === 200) {
                            layer.msg('删除成功', {icon: 1});
                            loadCustomers();
                            loadCustomerStats();
                        } else {
                            layer.msg('删除失败: ' + data.message, {icon: 2});
                        }
                    })
                    .catch(error => {
                        console.error('删除客户失败:', error);
                        layer.msg('删除失败，请检查网络连接', {icon: 2});
                    });
                    layer.close(index);
                });
            });
        }
        
        // 分页
        function goToPage(page) {
            currentPage = page;
            renderCustomerTable();
        }
        
        // 改变每页显示条数
        function changePageSize() {
            const newPageSize = parseInt(document.getElementById('pageSizeSelect').value);
            pageSize = newPageSize;
            currentPage = 1; // 重置到第一页
            renderCustomerTable();
        }
        
        // 表单提交
        document.getElementById('customerForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const customerId = document.getElementById('customerId').value;
            const customerData = {
                customerName: document.getElementById('customerName').value,
                phone: document.getElementById('phone').value,
                email: document.getElementById('email').value,
                address: document.getElementById('address').value,
                contactPerson: document.getElementById('contactPerson').value,
                company: document.getElementById('company').value,
                status: document.getElementById('status').value,
                remark: document.getElementById('remark').value
            };
            
            const url = customerId ? `/api/customers/${customerId}` : '/api/customers';
            const method = customerId ? 'PUT' : 'POST';
            
            fetch(url, {
                method: method,
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(customerData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        layer.msg(customerId ? '更新成功' : '添加成功', {icon: 1});
                    });
                    closeCustomerModal();
                    loadCustomers();
                    loadCustomerStats();
                } else {
                    layui.use(['layer'], function(){
                        var layer = layui.layer;
                        layer.msg('操作失败: ' + data.message, {icon: 2});
                    });
                }
            })
            .catch(error => {
                console.error('保存客户失败:', error);
                layui.use(['layer'], function(){
                    var layer = layui.layer;
                    layer.msg('保存失败，请检查网络连接', {icon: 2});
                });
            });
        });
        
        // 导航函数
        function goToHome() {
            window.location.href = 'index.html';
        }
        
        function showCustomers() {
            // 当前页面，无需跳转
        }

        // 跳转到商品管理页面
        function goToProducts() {
            window.location.href = 'products.html';
        }

        // 跳转到分类管理页面
        function goToCategories() {
            window.location.href = 'categories.html';
        }


        function goToOrders() {
            // 跳转到订单管理页面
            window.location.href = 'orders.html';
        }
        
        function goToStockIn() {
            // 跳转到入库管理页面
            alert('入库管理功能开发中...');
        }
        
        function goToStockOut() {
            // 跳转到出库管理页面
            alert('出库管理功能开发中...');
        }
        
        function goToReports() {
            // 跳转到统计报表页面
            alert('统计报表功能开发中...');
        }
        
        function goToSettings() {
            // 跳转到系统设置页面
            alert('系统设置功能开发中...');
        }
        
        // 点击模态框外部关闭
        window.onclick = function(event) {
            const modal = document.getElementById('customerModal');
            if (event.target === modal) {
                closeCustomerModal();
            }
        }
    </script>
</body>
</html>